<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>酷派鸡王小游戏</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link href="css/main.css" type="text/css" rel="stylesheet"/>
    <script src="js/jquery.js"></script>
    <script>
        (function(){
            var html = document.documentElement;
            var windowWidth = html.clientWidth;
            html.style.fontSize = windowWidth / 4.8 + 'px';
        })();
    </script>
</head>
<body>
    <!--游戏主页-->
    <div class="game">
        <img class="bg" src="img/game_bg.png"/>
        <a class="btn again" href="javascript:;"><img src="img/againbtn.png" /></a>
        <a class="btn listbtn" href="javascript:;"><img src="img/listbtn.png" /></a>
        <img class="c c1" src="img/c1.png">
        <img class="c c2 dn" src="img/c2.png">
        <img class="c c3 dn" src="img/c3.png">
        <div class="progress">
            <div class="wrap">
                <div style="max-height: 3.1rem!important; height: 0;" class="in"></div>
                <img src="img/progress.png"/>
            </div>
        </div>
    </div>
    <!--ready-->
    <div class="ready"><img src="img/ready.png"/> </div>
    <!--遮罩层-->
    <div class="alert_bg"></div>
    <!--规则-->
    <div class="rule">
        <p class="title">奖品领取规则</p>
        <p class="tip">1.游戏结束后，请在弹出页面留下您的手机号码，作为后期发放奖品的联系方式。</p>
        <p class="tip">2.排名前5名的获奖者将获得“XXX”一个；排名5-20名的获奖者将获得“XXX”一个；排名20-50名的获奖者将获得“X”一个；</p>
        <p class="tip">3.我们将从排名50名之后的获奖者中，随机抽取10名参与者，赠送“X”一个</p>
        <p class="txt">本活动最终解释权归酷派集团所有</p>
        <a class="btn" href="javascript:;"></a>
    </div>
    <!--排名-->
    <div class="list">
        <img class="bg" src="img/list_bg.png"/>
        <a class="close" href="javascript:;"><img src="img/list_close.png"></a>
        <a class="more" href="javascript:;"><img src="img/list_more.png"></a>
        <p class="title">鸡王排行榜</p>
        <div class="box">
            <p class="item">
                <span class="phone">13098898211</span>
                <span class="mid">&nbsp-----</span>
                <span class="prize">iPhone7p</span>
            </p>
            <p class="item">
                <span class="phone">13098898211</span>
                <span class="mid">&nbsp-----</span>
                <span class="prize">Mac Pro</span>
            </p>
            <p class="item">
                <span class="phone">13098898211</span>
                <span class="mid">&nbsp-----</span>
                <span class="prize">欧洲七日游</span>
            </p>
            <p class="item">
                <span class="phone">13098898211</span>
                <span class="mid">&nbsp-----</span>
                <span class="prize">太空三日游</span>
            </p>
            <p class="item">
                <span class="phone">13098898211</span>
                <span class="mid">&nbsp-----</span>
                <span class="prize">iPhone7p</span>
            </p>
            <p class="item">
                <span class="phone">13098898211</span>
                <span class="mid">&nbsp-----</span>
                <span class="prize">iPhone7p</span>
            </p>
            <p class="item">
                <span class="phone">13098898211</span>
                <span class="mid">&nbsp-----</span>
                <span class="prize">家里蹲春节游</span>
            </p>
            <p class="item">
                <span class="phone">13098898211</span>
                <span class="mid">&nbsp-----</span>
                <span class="prize">家里蹲春节游</span>
            </p>
            <p class="item">
                <span class="phone">13098898211</span>
                <span class="mid">&nbsp-----</span>
                <span class="prize">家里蹲春节游</span>
            </p>
        </div>
    </div>
    <!--是否中奖，留下电话-->
    <div class="end">
        <a class="close" href="javascript:;"><img src="img/list_close.png"></a>
        <p class="tip">请留下手机号码获得抽奖机会</p>
        <div class="phone"><input type="text"></div>
        <a class="true" href="javascript:;"><img src="img/truebtn.png"/> </a>
        <div class="no_pic">
            <img src="img/p1.png">
            <img src="img/p2.png">
            <img src="img/p3.png">
            <img src="img/p4.png">
            <img src="img/p5.png">
            <img src="img/p6.png">
            <img src="img/p7.png">
            <img src="img/p7.png">
            <img src="img/p8.png">
            <img src="img/p9.png">
            <img src="img/p10.png">
            <img src="img/p11.png">
            <img src="img/p12.png">
            <img src="img/p13.png">
            <img src="img/p14.png">
            <img src="img/p15.png">
            <img src="img/p16.png">
            <img src="img/p17.png">
            <img src="img/p18.png">
            <img src="img/p19.png">
            <img src="img/p20.png">
            <img src="img/p21.png">
            <img src="img/p22.png">
            <img src="img/p23.png">
        </div>
        <div class="yes_pic">
            <div class="text">
                <p>恭喜</p>
                <p>暂列第<span>1</span>名</p>
            </div>
            <p class="yes_tip">获奖结果以最终排名为准</p>
            <img class="pic" src="img/yes_pic.png"/>
        </div>
    </div>
</body>
<script>
    $(function(){
        /*初始化*/
        function iniState(){
            $('.alert_bg,.ready,.rule').show();
            $('.no_pic img').hide();
        };
        iniState();

        /*规则关闭*/
        $('.rule .btn').click(function(){
           $('.rule').hide();
        });
        /*开始*/
        $('.ready').click(function(){
            $('.alert_bg,.ready').hide();
            gameClick();
            setTimeout(gameEnd,5000);
            //alert(i)
        });
        /*+1动画*/
        var i = 0;//点击次数
        var j = 0;//小鸡动画
        var h = 0;//进度条高度
        var x = 0;//实际点击次数
        var n = 1;//游戏次数
        var p = '<p class="num animate"><img src="img/add.png"></p>';
        function gameClick(){
            $('.c').on('click', function() {
                i++;
                h = 3.1*i/100+'rem';
                if(i==100){
                    h= 3.1+'rem'
                }
                //console.log(i);
                $('body').append(p);
                $('.in').css('height',h);
                if(j==0){
                    $('.c').addClass('dn');
                    $('.c').eq(1).removeClass('dn');
                    j++;
                }else if(j==1){
                    $('.c').addClass('dn');
                    $('.c').eq(2).removeClass('dn');
                    j++;
                }else if(j==2){
                    j=0;
                    $('.c').addClass('dn');
                    $('.c').eq(0).removeClass('dn');
                }
                if(n==1){
                    x = i;
                }else {
                    x = i/2 ;
                }
                console.log(x);//最终点击次数
                //alert(i)
            });
        };


        /*5秒关闭,弹出*/
        function gameEnd(){
            $('.end,.alert_bg').show();
            /*中奖*/
            //$('.yes_pic').show();
            /*未中奖*/
            $('.no_pic').show();
            $('.no_pic img').eq(parseInt(23*Math.random())-1).show();
            i= 0;
            h = 0;
            $('.in').css('height',h);

        };
        /*提交手机号*/
        $('.true').click(function(){
            var Tel = $('.phone input').val();
            var isTel=/^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/.test(Tel);
            if(Tel.length==0){
                alert('请输入手机号！');
                return false;
            }else if(!isTel){
                alert('请输入正确手机号！');
                return false
            }else {
                $('.end,.alert_bg').hide();
                i= 0;
                h = 0;
                $('.in').css('height',h);
                $('.no_pic img').hide();
                /*解除小鸡点击事件*/
                $('.c').unbind();
            }
        });
        /*再来一次*/
        $('.again').click(function(){
            n++;
            iniState();
            gameClick();
        });
        /*榜单*/
        $('.listbtn').click(function(){
            $('.list').show();
        });
        /*关闭弹框*/
        $('.close').click(function(){
            $('.list,.end,.alert_bg').hide();
            $('.no_pic img').hide();
            /*解除小鸡点击事件*/
            $('.c').unbind();
        });

    });
</script>


<!--<script>
    var g = 0;//+1时间数
    var a = 0;//.add数
    /*+1运动轨迹*/

    function add_go(n){
        if(g>3){
            g = 0;
            $('.add').hide();
            clearInterval(addOneTime);
        }
        var XArr = ['0.7rem','0.9rem','1.1rem','0.9rem'];
        var YArr = ['2.6rem','2.2rem','1.8rem','1.4rem'];
        var WArr = ['0.55rem','0.45rem','0.35rem','0.25rem'];
        var HArr = ['0.45rem','0.35rem','0.30rem','0.20rem'];
        console.log(g);
        $('.add').eq(n).css('top',YArr[g]).css('right',XArr[g]).css('width',WArr[g]).css('height',HArr[g]);
        g++;
        //setTimeout('clearInterval(addOneTime)',2000);
    };


    $(function(){
        /*点击切换图片*/
        var i=1;
        var j=0;
        $('.c').click(function(){
            if(j<4){
                //clearInterval(addOneTime);
                $('.add').eq(j).show();
                addOneTime = setInterval('add_go('+j+')',500);
            }else{
                j=0;
                clearInterval(addOneTime);
                $('.add').eq(j).show();
                addOneTime = setInterval('add_go('+j+')',500);
            }
            j++;
            //$('.game').append('<div class="add"><img src="img/add.png"/></div>');

            //setInterval('clearInterval(addOneTime)',2000);
            if(i<3){
                i++;
                $(this).addClass('dn');
                $(this).next().removeClass('dn');
            }else if(i==3){
                i=1;
                $('.c').addClass('dn');
                $('.c').eq(0).removeClass('dn');

            }
            //setTimeout('clearInterval(addOneTime)',2000);
        });
        /*+1动画*/
        //window.setInterval("add_go()",500);

    });
</script>-->
</html>